<template>
	<view class="console">
		<u-loading-page :loading="load" loading-text="loading..." bg-color="#fff"></u-loading-page>

		<view>
			<u-notice-bar :text="text1"></u-notice-bar>
			<u-search @search="searchFn" :type="number" shape="round" :showAction="false" :clearabled="true"
				placeholder="请输入产品ID" v-model="productId"></u-search>
		</view>
		<!-- 数据为空展示 -->
		<u-empty mode="data" v-if="!load && !cateArr.length"></u-empty>

		<tui-card v-for="(item,i) in cateArr" :key="i">
			<template v-slot:body>
				<!-- 管理 -->
				<u-cell-group customStyle="background-color: #fff">
					<u-cell :title="item.name" :isLink="true" @click="goConsoleDetails(item)"></u-cell>
					<u-row customStyle="height: 100px">
						<u-col span="6" textAlign="center">
							<span class="balance-text" style="font-size:60rpx;font-weight: 500;">{{item.total}}</span>
							<view class="balance">{{item.name}}</view>
						</u-col>
						<u-col span="6" textAlign="center">
							<view class="details">
								<span class="region-text detailsState">运行中：<span class="detailsTotal">0</span></span>
								<span class="region-text detailsState">已暂停：<span class="detailsTotal">0</span></span>
							</view>

							<view class="details">
								<span class="region-text detailsState">已销毁：<span class="detailsTotal">0</span></span>
								<span class="region-text detailsState">有欺诈：<span class="detailsTotal">0</span></span>
							</view>
						</u-col>
					</u-row>
				</u-cell-group>
			</template>
		</tui-card>
	</view>
</template>

<script>
	import tuiCard from "@/components/thorui/tui-card/tui-card"
	export default {
		components: {
			tuiCard
		},
		onShow() {
			console.log('进入')
			this.getCatesList()
		},
		data() {
			return {
				load: false,
				productId: '', //产品ID
				cateArr: [],
				text1: '产品重要通知!!!产品重要通知!!!产品重要通知!!!产品重要通知!!!'
			}
		},
		onTabItemTap(e) {
			if (e.text == '控制台') {
				if (!this.$store.state.loginModules.jwtToken) {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}
			}
		},
		methods: {
			async getCatesList() {
				this.load = true
				const result = await uni.$http.get('/v1/hosts/cates')
				if (result.data.status !== 200) return uni.$showMsg()
				for (let i = 0; i < result.data.data.cate.length; i++) {
					const r = await uni.$http.get('/v1/hosts?cate_id=' + result.data.data.cate[i].id)
					result.data.data.cate[i]['total'] = r.data.data.total
				}
				this.cateArr = result.data.data.cate
				this.load = false
			},
			goConsoleDetails(item) {
				uni.navigateTo({
					url: '/subpages/consoleDetails/consoleDetails?id=' + item.id
				})
			},
			// 搜索框跳转
			searchFn() {
				if (/^[0-9]+$/.test(this.productId)) {
					uni.navigateTo({
						url: '/subpages/productInfo/productInfo?id=' + this.productId
					})
				}

			},
			// 监听页面离开
			onHide() {
				console.log('离开')
				this.cateArr = []
			}
		}
	}
</script>

<style lang="scss">
	.console {
		min-height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
		margin-top: -2px;
	}

	.tui-card {
		margin: 30rpx 30rpx !important;
		border-radius: 20rpx !important;

		.u-icon__icon {
			color: #3578e9 !important;
		}
	}

	/deep/.tui-card-header {
		padding: unset !important;
	}

	.details {
		margin: 5rpx;
		display: flex;
		justify-content: space-evenly;

		.detailsState {
			font-size: 30rpx;
			color: #7c878e;

			.detailsTotal {
				color: #000;
			}
		}
	}
</style>
